{include file="public/header"/}
<div class="layui-container">
    <div class="layui-main">
        <form class="layui-form" autocomplete="off" lay-filter="val-filter">
            <div class="layui-form layui-input-xl">
                <div class="layui-form-item layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-cellphone"></i>
                    </div>
                    <input type="text" name="mobile" placeholder="输入手机号" value="{$info.mobile ?? ''}" class="layui-input" disabled> 
                </div>
                <div class="layui-form-item" style="display: flex;">
                    <div style="width: 160px;">
                        <input type="text" class="layui-input captcha" name="captcha" placeholder="输入图形验证码" lay-verify="required" lay-reqtext="请输入图形验证码" lay-vertype="tips" maxlength="4">
                    </div>
                    <img class="validateImg" src="/login/captcha" onclick="this.src='/login/captcha?seed='+Math.random()">
                </div>
                <div class="layui-form-item">
                    <input type="text" name="verify_code" lay-verify="required" lay-vertype="tips" lay-reqtext="请输入验证码" placeholder="输入验证码" value="" class="layui-input" maxlength="6"> 
                    <button type="button" class="layui-btn layui-btn-primary vercode" id="get-vercode">获取验证码</button>
                </div>
                <div class="layui-form-item layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" class="layui-input" name="password" lay-verify="password" lay-vertype="tips" placeholder="设置密码（6 - 20位英文或数字）" maxlength="20" lay-affix="eye">
                </div>
            </div>
            <div class="hr-line"></div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-bg-success" id="saveBtn" lay-submit lay-filter="saveBtn">保 存</button>
                    <a class="layui-btn layui-btn-primary" id="cancelBtn">取 消</a>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    layui.use(['form','layer','upload'], function(){
        var layer = layui.layer, form = layui.form, upload = layui.upload, $=layui.jquery;
        
        form.verify({
            password: [
            /^[\S]{6,16}$/
            ,'密码必须为 6 到 16 位的非空字符'
            ]
        });

        $("#cancelBtn").on('click',function(){
            var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
            parent.layer.close(index);//关闭窗口  
        });

        // 发送短信验证码
        $("#get-vercode").on('click',function(){
            var time = 60; // 倒计时时间
            var that = this;
            if(time == 60){
                var phone_valid = form.validate('.phone'); // 主动触发验证，v2.7.0 新增 
                // 验证通过
                if(phone_valid){
                    var captcha_valid = form.validate('.captcha');
                    if (captcha_valid)  {
                        var formData = form.val('val-filter');
                        
                        var loading = layer.msg('验证码发送中..', {icon: 16,shade: 0.3,time: false});
                        $.ajax({
                            url:'/login/send_verify_code',
                            type:'post',
                            data:formData,
                            dataType:"JSON",
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                            success:function(res){
                                layer.close(loading);  //返回数据关闭loading
                                if(res.code == 0){
                                    layer.msg(res.msg,{icon: 1,time:1500},function(){
                                        // 启动倒计时
                                        $(that).prop('disabled', true);
                                        var timer = setInterval(function(){
                                            if (time == 0) {
                                                clearInterval(timer);
                                                $(that).prop('disabled', false);
                                                $(that).text('重新获取');
                                                time = 60; // 重置时间
                                            } else {
                                                $(that).text('（'+time+'）' + '秒后重新发送');
                                                time--;
                                            }
                                        }, 1000);
                                    });  
                                } else{
                                    captchacheng();
                                    layer.msg(res.msg,{icon: 2, time: 2000});
                                }
                            },
                            error:function(e){
                                layer.close(loading);
                                layer.msg('请求失败'+e.responseText,{icon: 2});
                            },
                        });
                    }
                }
            }
        });

        form.on('submit(saveBtn)', function(data){
            var loading = layer.msg('数据处理中..', {icon: 16,shade: 0.3,time: false});
            $.ajax({
                url:'/user/update_pass',
                type:'post',
                data:data.field,
                dataType:"JSON",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);  //返回数据关闭loading
                    if(res.code == 0){
                        $("#saveBtn").removeClass("layui-bg-success").addClass("layui-btn-disabled");
                        $("#saveBtn").attr("disabled","true");
                        layer.msg(res.msg,{icon: 1,time:1500},function(){
                            var index= parent.layer.getFrameIndex(window.name);//获取当前层
                            parent.layer.close(index);//关闭当前层
                            parent.location.reload();
                        });
                        
                    } else{
                        layer.msg(res.msg,{icon: 2});
                    }
                },
                error:function(e){
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
                
            });
            return false;
        });

        //刷新验证码
        function captchacheng(){
            $(".validateImg").attr('src','/login/captcha?seed='+Math.random());
        }
    });
    
</script>